<template>
    <div class="profile">
        <div class="profile-left">
            <span>个人信息</span>
            <hr>
            <p>
                <el-avatar shape="circle" style="width: 100px;height: 100px;" fit= 'cover' src="/img/snowman.jpg" />
            </p>
            <hr>
            <p>
                <span>
                    <el-icon><UserFilled /></el-icon>
                    用户名称
                </span>
                <span>
                    czh
                </span>
            </p>
            <hr>
            <p>
                <span>
                    <el-icon><Iphone /></el-icon>
                    手机号码
                </span>
                <span>152********</span>                
            </p>
            <hr>
            <p>
                <span>
                    <el-icon><InfoFilled /></el-icon>
                    用户邮箱
                </span>
                <span>
                    552639***@qq.com
                </span>
            </p>
            <hr>
            <p>
                <span>
                    <el-icon><Histogram /></el-icon>
                    所属部门
                </span>
                <span>
                    研发
                </span>
            </p>
            <hr>
            <p>
                <span>
                    <el-icon><Avatar /></el-icon>
                    所属角色
                </span>
                <span>
                    管理员
                </span>
            </p>
            <hr>
            <p>
                <span>
                    <el-icon><Calendar /></el-icon>
                    创建日期
                </span>
                <span>
                    2024-1-18 14:00:32
                </span>
            </p>
            <hr>
        </div>
        <div class="profile-right">
            <span>基本资料</span>
            <hr>
            <div>
                <span @click="checkNum=checkNum==0?1:0" :style="[{'border-Bottom-color':checkNum==1?'blue':''},{'color':checkNum==1?'blue':''}]">基本资料</span>
                <span @click="checkNum=checkNum==0?1:0" :style="[{'border-Bottom-color':checkNum==0?'blue':''},{'color':checkNum==0?'blue':''}]">修改密码</span>
                <BasicInforCom :style="{'display':checkNum==0?'none':''}" style="margin-top: 20px;"/>
                <ModifyInforCom :style="{'display':checkNum==1?'none':''}" style="margin-top: 20px;"/>
            </div>
            
        </div>

    </div>
</template>

<script setup>
import BasicInforCom from '@/coms/BasicInforCom.vue';
import ModifyInforCom from '@/coms/ModifyInforCom.vue';
import { ref } from 'vue';

let checkNum=ref(1);

</script>

<style scoped>
.profile{margin: 20px; display: flex; align-items: flex-start; justify-content: flex-start;}
.profile > div{box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 10px;}
.profile-left{ width: 300px; height: 450px;}
.profile-left p{display: flex;  padding: 10px 0; justify-content: center; width: 300px;}
.profile-left p :nth-child(2){margin-left: auto;}
.profile-right{margin-left: 20px; width: 900px; height: 400px;}
.profile-right>div{margin: 20px 10px;}
.profile-right>div>span{display: inline-block; padding: 10px 20px 10px 0; border: 2px solid #fff;}
</style>